在vue中使用qrcodejs2生成二维码，解决Cannot read properties of undefined (reading ‘

2024-06-25 13:26| 来源: 网络整理| 查看: 265

安装插件

npm install qrcodejs2 --save npm install qrcodejs2-fiX --save

实例代码

请复制二维码或者链接 {{state.url}} import QRCode from 'qrcodejs2-fix'; import { ref } from "vue"; const router = useRouter(); const state = reactive({ url: "", }); const qrCodeDiv = ref(null); let timerImg = setInterval(() => { const trueQrCode = document.getElementById("trueQrCode") const divQrCode = document.getElementById("qrCode") if(!trueQrCode || !divQrCode) return; let src = ""; if(src === "" && divQrCode.getElementsByTagName('img').length > 0){ const element = divQrCode.getElementsByTagName('img')[0] src = element.src } if(src === "" && divQrCode.getElementsByTagName('canvas').length > 0){ const element = divQrCode.getElementsByTagName('canvas')[0] src = element.toDataURL("image/png"); } if(src !== ""){ clearInterval(timerImg) trueQrCode.setAttribute("src", src) } },300); onMounted(async () => { console.log("===home onMounted"); nextTick(() => { console.log("===home onMounted nextTick"); getQrCode(); }) }); onUnmounted(async () => { console.log("===home onUnmounted"); clearInterval(timerImg) }) const getQrCode = async () => { const root = window.location.protocol+"//"+window.location.host //拼接字符串 const url = root+'/#/signup?i='+'abcd' state.url = url new QRCode(qrCodeDiv.value, { text: url, width: 200, height: 200, colorDark: "#333333", //二维码颜色 colorLight: "#ffffff", //二维码背景色 correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H }) }; const onClickLeft = () => { router.go(-1); }; .container { padding: 24px 40px 24px 40px; .my_input { margin-bottom: 36px; :deep(.van-field__label) { color: #e7fcff; text-align: left; } } .my_text { margin-bottom: 72px; :deep(.van-field__label) { color: #e7fcff; text-align: left; } } .van-button { width: 100%; } } #qqq { background-color: #111; width:200px; height:200px; margin: 0 auto; /*水平居中*/ #trueQrCode{ width: 200px; height: 200px; padding: 0px; // 利用padding的特性，挤出白边 } } #qrCode { display: none; } #title{ text-align: center; padding-bottom: 10px; } #text{ text-align: center; padding-top: 10px; a { color: white; } }

1.vue中使用qrcodejs2生成二维码失败Cannot read properties of undefined (reading '_android')

第一步：安装插件npm install qrcodejs2-fiX --save 第二步：在引入插件使用：import QRCode from 'qrcodejs2-fix';

2.vue中使用qrcodejs2生成的二维码图片在手机浏览器上不能长按保存图片

qrcodejs2在生成图片时会根据浏览器是否支持CanvasRenderingContext2D判断使用img或者canvas生成二位阿门。如果采用了canvas，则长按不能保存图片，解决思路：增加一个img，隐藏qrcodejs2的容器div。判断div中的img是否有src，有就赋值给img，没有的话就将canvas的数据赋值给img;

【本文地址】

公司简介

联系我们